<template>
    <view class="swiper-section">
        <swiper class="swiper" autoplay interval="3000" duration="500" :current="currentIndex"
            @change="handleSwiperChange">
            <swiper-item v-for="item of 5" :key="item">
                <image src="/static/bg.png" mode="aspectFill" class="swiper-image"></image>
            </swiper-item>
        </swiper>
        <!-- 自定义指示点 -->
        <view class="indicator">
            <view class="indicator-item" v-for="(item, index) in 5" :key="index"
                :class="{ 'active': currentIndex === index }"></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
const currentIndex = ref(0)

function handleSwiperChange(e) {
    currentIndex.value = e.detail.current
}
</script>

<style lang="scss" scoped>
.swiper-section {
    position: relative;

    .swiper {
        height: 640rpx;

        .swiper-image {
            width: 100%;
            height: 100%;
        }
    }

    .indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 16rpx;
        position: absolute;
        bottom: 64rpx;
        left: 50%;
        transform: translateX(-50%);
        height: 44rpx;

        .indicator-item {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #FFFFFF;
            opacity: 0.3;
        }

        .indicator-item.active {
            opacity: 1;
        }
    }
}
</style>